<template>
	<view class="content">
		<uni-forms :modelValue="formData" label-width='80px' ref='form' label-align="right" class="uni-mt-10"
			:rules="rules">
			<uni-forms-item label="选择片区" name="QuyuCode">
				<uni-data-select v-model="formData.QuyuCode" @change="changeQuyu"
					:localdata="quyuList"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="身份证号" name="CardNo">
				<uni-easyinput v-model="formData.CardNo" :disabled="Carddisabled" @blur="blueCard" />
			</uni-forms-item>
			<uni-forms-item label="出生日期" name="Born">
				<uni-datetime-picker type="date" return-type="data" :clear-icon="false" v-model="formData.Born" />
			</uni-forms-item>
			<uni-forms-item label="年龄" name="Age">
				<uni-easyinput v-model="formData.Age" />
			</uni-forms-item>
			<uni-forms-item label="姓名" name="Name">
				<uni-easyinput v-model="formData.Name" />
			</uni-forms-item>
			<uni-forms-item label="性别" name="Sex">
				<uni-data-checkbox v-model="formData.Sex" :localdata="Sexs" />
			</uni-forms-item>
			<uni-forms-item label="本人电话" name="phone">
				<uni-easyinput v-model="formData.phone" />
			</uni-forms-item>
			<view class="hrView">
				<text>人群分类</text>
				<hr />
			</view>
			<uni-forms-item name="Glbz">
				<uni-data-checkbox v-model="formData.Glbz" multiple :localdata="hobbys" />
			</uni-forms-item>
			<view class="buttonView">
				<button class="green" @click="submit(form)">保存修改</button>
				<button @click="goIndex()">返回</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import {
		getQuYu,
		addPerson
	} from '@/api/index.js'
	export default {
		data() {
			return {
				Carddisabled: false,
				quyuList: [],
				formData: {
					Id: '',
					Name: '',
					Sex: '',
					Quyu: '',
					QuyuCode: '',
					phone: '',
					CardNo: '',
					Born: '',
					Glbz: '',
					Age: ''
				},
				hobbys: [{
					value: '高血压',
					text: '高血压'
				}, {
					value: '糖尿病',
					text: '糖尿病'
				}, {
					value: '精神障碍',
					text: '精神障碍'
				}],
				Sexs: [{
					value: '男',
					text: '男'
				}, {
					value: '女',
					text: '女'
				}],
				rules: {
					// 对name字段进行必填验证
					Name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					QuyuCode: {
						rules: [{
							required: true,
							errorMessage: '请选择区域'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入电话'
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = /^1[0-9]{10}$/
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					CardNo: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号'
						}, {
							maxLength: 18,
							errorMessage: '请输入正确的身份证格式'
						}]
					},
					Born: {
						rules: [{
							required: true,
							errorMessage: '请输入出生日期'
						}]
					},
					Glbz: {
						rules: [{
							required: true,
							format: 'array',
							errorMessage: '请选择人群分类',
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value.length < 1) {
									callback('请至少勾选一个人群分类')
								}
								return true
							}
						}]
					}
				}
			}
		},
		onShow() {
			if (uni.getStorageSync('quyu')) {
				this.quyuList = [{
					value: `${uni.getStorageSync('quyu')}`,
					text: `${uni.getStorageSync('quyu')}`
				}]
			} else {
				getQuYu().then(res => {
					res.forEach((item, index) => {
						this.quyuList.push({
							value: item.Value,
							text: item.Member
						})
					})
					if (this.formData.Quyu) {
						this.quyuList.forEach(item => {
							this.formData.Quyu == item.text ? this.formData.QuyuCode = item.value : ''
						})
					}
				})
			}
		},
		onLoad(option) {
			if (option.data) {
				this.formData = JSON.parse(option.data)
				this.formData.Born = this.formData.Born.split(' ')[0]
				this.formData.QuyuCode = this.formData.Quyu
				this.formData.Id = JSON.parse(option.data).Id
				this.formData.Sex = JSON.parse(option.data).sex
				this.formData.Age = JSON.parse(option.data).Age
				this.formData.Glbz = JSON.parse(option.data).Glbz.split(',')
				this.formData.Quyu = JSON.parse(option.data).Quyu
				this.Carddisabled = true
			} else {
				this.Carddisabled = false
			}

		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					res.Glbz = res.Glbz.toString()
					res.Id = this.formData.Id
					res.Quyu = this.formData.Quyu
					addPerson(res).then(response => {
						uni.showToast({
							icon: 'none',
							title: '新增成功'
						})
						this.goIndex()
					})
				})
			},
			changeQuyu(e) {
				this.quyuList.forEach(item => {
					item.value == e ? this.formData.Quyu = item.text : ''
				})
			},
			blueCard() {
				this.formData.Born = this.idCard(this.formData.CardNo, 1)
				this.formData.Sex = this.idCard(this.formData.CardNo, 2)
				this.formData.Age = this.idCard(this.formData.CardNo, 3)
			},
			//通过身份证号计算年龄、性别、出生日期
			idCard(userCard, num) {
				//获取出生日期
				if (num == 1) {
					let birth = userCard.substring(6, 10) + "-" + userCard.substring(10, 12) + "-" + userCard.substring(12,
						14);
					return birth;
				}
				//获取性别
				if (num == 2) {
					if (parseInt(userCard.substr(16, 1)) % 2 == 1) {
						return "男";
					} else {
						return "女";
					}
				}
				//获取年龄
				if (num == 3) {
					var myDate = new Date();
					var month = myDate.getMonth() + 1;
					var day = myDate.getDate();
					var age = myDate.getFullYear() - userCard.substring(6, 10) - 1;
					if (userCard.substring(10, 12) < month || userCard.substring(10, 12) == month && userCard.substring(12,
							14) <= day) {
						age++;
					}
					return age;
				}
			},
			goIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100wh;
		padding: 0 15rpx;
		box-sizing: border-box;
	}

	.hrView {
		position: relative;
		height: 40rpx;

		text {
			padding: 0 15rpx;
			position: absolute;
			display: inline-block;
			background-color: #F5F5F5;
			z-index: 1;
			margin-left: 20rpx;
		}

		hr {
			width: 100%;
			position: absolute;
			top: 20rpx;
			background-color: #dfdfdf;
			border: 1px solid #dfdfdf;
			border-bottom: none;
		}
	}

	.buttonView {
		margin: 0 auto;
		width: 40%;
		text-align: center;
		display: flex;

		button {
			font-size: 22rpx;
		}
	}

	.green {
		background-color: #009316;
		color: white;
	}

	:deep(.uni-data-checklist) {
		padding-top: 12rpx;
	}
</style>